<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/heads.css">
  <link rel="stylesheet" href="/css/datatils.css">
  <title>Document</title>
</head>

<body>
  <!-- 页头部分 -->
  <div class="nav">
    <ul>
      <li class="pc">
        <a href="index.html">首页</a>
      </li>
      <li class="pc">
        <a href=""> 品牌历史</a>
        <div class="fen">
          <ul class="fen_en">
            <li><a href="index_story.html">一个美丽的故事</a> </li>
            <li>传承人的故事</li>
          </ul>
        </div>
      </li>
      <li class="pc">
        <a href="poins.html">产品中心</a>
        <div class="fen">
          <ul class="fen_en fen1">
            <li><a href=""><a href="poin_sj.html">三角钢琴</a></li>
            <li><a href="poin_ls.html">立式钢琴</a></li>
          </ul>
        </div>
      </li>
      <li class="pc">
        <a href="index_zt.html">展厅</a>
      </li>
      <a class="logo" href="#"></a>
      <li class="pc"><a href="new.html?page=1">新闻首页</a></li>
      <li class="pc">服务
        <div class="fen">
          <ul class="fen_en fen2">
            <li><a href="maintain.html">保养与维护</a></li>
            <li><a href="#">经销商查询</a></li>
          </ul>
        </div>
      </li>
      <li class="pc"><a href="">联系</a></li>
      <li class="pc"><a href="lodin.html">个人中心</a></li>
    </ul>
    <span class="ico">
      <em></em>
      <em></em>
      <em></em>
    </span>
  </div>
  <div class="navBou">
    <div>首页</div>
    <div>
      品牌历史
      <p><a href="">个美丽的故事</a></p>
      <p><a href="">传承人的故事</a></p>
    </div>
    <div>
      产品中心
      <p><a href="">三角钢琴</a></p>
      <p><a href="">立式钢琴</a></p>
    </div>
    <div><a href="index_zt.html">展厅</a></div>
    <div><a href="new.html">新闻首页</a></div>
    <div>服务
      <p><a href="">保养与维护</a></p>
      <p><a href="">经销商查询</a></p>
    </div>
  </div>
  <!-- xl商品详情 -->
  <div class="ls-data">
    <!-- 图片部分 -->
    <div>
      <div class="rotation">
        <img src="/img/left.png" alt="" id="left">
        <div>
          <div class="rotbbox">
            <div>
              <ul>
                <li>
                  <img data-big="/img/ls01.jpg" src="/img/ls01.jpg" alt="" onclick="window.location.href = 'poin_ls_datatils.html?lsname=L1-BLK'">
                  <p>L1-BLK</p>
                </li>
                <li>
                  <img src="/img/ls02.jpg" alt="" onclick="window.location.href = 'poin_ls_datatils.html?lsname=L5-BLK'">
                  <p>L5-BLK</p>
                </li>
                <li>
                  <img src="/img/ls03.jpg" alt="" onclick="window.location.href = 'poin_ls_datatils.html?lsname=L8-BLK'">
                  <p>L8-BLK</p>
                </li>
                <li>
                  <img src="/img/ls04.jpg" alt=""  onclick="window.location.href = 'poin_ls_datatils.html?lsname=P124-BLK'">
                  <p>P124-BLK</p>
                </li>
                <li>
                  <img src="/img/ls05.jpg" alt="" onclick="window.location.href = 'poin_ls_datatils.html?lsname=P124-WHT'">
                  <p>P124-WHT</p>
                </li>
                <li>
                  <img src="/img/ls06.jpg" alt="" onclick="window.location.href = 'poin_ls_datatils.html?lsname=P124-MAC'">
                  <p>P124-MAC</p>
                </li>
                <li>
                  <img src="/img/ls07.jpg" alt="" onclick="window.location.href = 'poin_ls_datatils.html?lsname=P124-OPM'">
                  <p>P124-OPM</p>
                </li>
                <li>
                  <img src="/img/ls08.jpg" alt="" onclick="window.location.href = 'poin_ls_datatils.html?lsname=P131-BLK'">
                  <p>P131-BLK</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <img src="/img/right.png" alt="" id="right" >
      </div>
    </div>
    <!-- 商品简介部分 -->
    <div class="brief">
      <!-- 图片部分 -->
      <div class="picture" id="pic">
        <div>
          <img src="/img/ls01.jpg" alt="">
          <span></span>
          <p>
            <img src="/img/ls01.jpg" alt="">
          </p>
        </div>
        <div>
          <div data-bg="" style="background-image: url('../img/ls01_1.jpg');"></div>
          <div data-bg="" style="background-image: url('../img/ls01_2.jpg');"></div>
          <div data-bg="" style="background-image: url('../img/ls01_3.jpg');"></div>

        </div>
      </div>
      <!-- 详情页面 -->
      <div class="details">
        <!-- 介绍部分 -->
        <div id="intro">
          <h2>L1-BLK</h2>
          <div>普雷耶“致敬肖邦”系列是伟大钢琴诗人肖邦诞辰210周年纪念版钢琴，由普雷耶国际全球技术总监Patrick Horn WEGNER先生全程参与监制和验收，
            由普雷耶中国授权发售。该系列产品完全遵照法国普雷耶原始设计图纸，完全符合或满足法国普雷耶材料配件标准和工艺技术标准，完全符合或满足法国普雷耶最终验收标准。
            “致敬肖邦”钢琴系列产品采用了当代最前沿的科学技术方法，对钢琴关键零部件关键性能做了优化和改良，传承并丰富了肖邦时代普雷耶钢琴“朦胧的”浪漫音色和轻盈细腻的触感。</div>
          <p>全国统一零售价<b>RMB</b><span>36,800.00</span></p>
          <button>联系我们</button>
        </div>
        <!-- 详情部分 -->
        <div class="par">
          <h2>技术参数</h2>
          <table>
            <tbody id="lsPar">
            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer-en">
      <div class="flex_box">
        <img src="/img/link1.png" alt="">
        <img src="/img/link2.png" alt="">
        <img src="/img/link3.png" alt="">
        <img src="/img/link4.png" alt="">
        <img src="/img/link5.png" alt="">
      </div>
      <div class="flex_box">
        <ul>
          <h4>客户服务</h4>
          <li><a href="">经销商查询</a></li>
          <li><a href="">联系我们</a></li>
        </ul>
        <div>
          <img src="/img/home_07.jpg" alt="">
          <img src="/img/home_09.jpg" alt="">
          <img src="img/home_11.jpg" alt="">
          <img src="/img/home_13.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="footer2">
    <div class="footer_en">
      <div></div>
      <div>Pleyel © 2019 普雷叶乐器（上海）有限公司 沪ICP备18021165号-1</div>
    </div>
  </div>
  <script src="../js/header.js"></script>
  <script>
    let intro = document.getElementById('intro')
    let lsPar = document.getElementById('lsPar')
   
    let pic=document.getElementById('pic')
    let $=(s)=>document.querySelectorAll(s)
    let aimgs=$('.picture>div>div')
    let picimg=$('.picture img ')[0]
    let digDraw=document.querySelector('.picture>div>p>img')
    //添加商品详情页数据
    //监听url参数
    let query = window.location.search.substring(1).split('=');
    let str = query[1]
    {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            let reult = JSON.parse(xhr.responseText).data
            let strPar = ajksPar(reult);
            /* console.log(reult) */
            lsPar.innerHTML = strPar
            let strTro = ajksTro(reult)
            intro.innerHTML = strTro;
          }
        }
      }
      xhr.open('GET', `/v1/main/ls/${str}`, true);
      xhr.send();
    }
    //添加商品图片数据
    {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            let reult = JSON.parse(xhr.responseText).data[0]
            aimgs[0].style.backgroundImage=`url("../img/${reult.p_url1}.jpg")`
            aimgs[1].style.backgroundImage=`url("../img/${reult.p_url2}.jpg")`
            aimgs[2].style.backgroundImage=`url("../img/${reult.p_url3}.jpg")`
            aimgs[0].dataset.bg=`/img/${reult.p_url1}.jpg`
            aimgs[1].dataset.bg=`/img/${reult.p_url2}.jpg`
            aimgs[2].dataset.bg=`/img/${reult.p_url3}.jpg`
            picimg.src=`/img/${reult.p_url1}.jpg`
            /* 设置放大镜图片 */
            digDraw.src=`/img/${reult.p_url1}.jpg`
            clickPic(reult)
          }
        }
      }
      xhr.open('GET', `/v1/main/lspic/${str}`, true);
      xhr.send();
    }
    //建立点击切换图片函数
    function clickPic(obj){
      aimgs.forEach(el=>{
        el.onclick=function(){
          picimg.src=el.dataset.bg
          digDraw.src=el.dataset.bg
        }
      })
    }

    //建立函数添加商品介绍部分
    function ajksPar(arr) {
      let obj = arr[0]
      let str = `<tr>
                <td><span>击弦机</span><span>：</span></td>
                <td>${obj.renner}</td>
              </tr>
              <tr>
                <td><span>键盘</span><span>：</span></td>
                <td>${obj.keyboard}</td>
              </tr>
              <tr>
                <td><span>弦槌</span><span>：</span></td>
                <td>${obj.hammer}</td>
              </tr>
              <tr>
                <td><span>定弦钮</span><span>：</span></td>
                <td>${obj.tuning}</td>
              </tr>
              <tr>
                <td><span>音板</span><span>：</span></td>
                <td>${obj.soundboard}</td>
              </tr>
              <tr>
                <td><span>产地</span><span>：</span></td>
                <td>${obj.origin}</td>
              </tr>
              <tr>
                <td><span>重量</span><span>：</span></td>
                <td>${obj.weight}</td>
              </tr>
              <tr>
                <td><span>漆面</span><span>：</span></td>
                <td>${obj.finish}</td>
              </tr>`
      return str;
    }
    //建立函数添加商品介绍部分
    function ajksTro(arr) {
      let obj = arr[0]
      let umn = obj.price + '';
      let umnval = umn.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '.00'
      /* console.log(umnval) */
      let str = ` <h2>${obj.lsname}</h2>
          <div>${obj.texts}</div>
          <p>全国统一零售价<b>RMB</b><span>${umnval}</span></p>
          <button>联系我们</button>`
      return str
    }  
    //设置点击事件移动图片
    {

      let right=document.getElementById('right')
      let left=document.getElementById('left')
      let len=document.querySelectorAll('.rotbbox ul>li').length
      let ul=document.querySelector('.rotbbox ul')
      let conut=len-6;
      let num=0;
      right.onclick=function(){
        if(num<conut){
          num++
          ul.style.transform=`translateX(${-184*num}px)`
          ul.style.transition='1s'
        }
      }
      left.onclick=function(){
        if(num>0){
        num--
        ul.style.transform=`translateX(${-184*num}px)`
        ul.style.transition='1s'
      }
    }
      
    }
    
    //放大镜功能
    {
      let origDraw=document.querySelector('.picture>div')
      let digDraw=document.querySelector('.picture>div>p>img')
      let view=document.querySelector('.picture>div>p')
      let enlarge=document.querySelector('.picture>div>span')
      let paDraw=document.querySelector('.brief')
      //监听浏览器页面移动的值
      let scollTop=0
      window.onscroll=function(){
        scollTop=document.documentElement.scrollTop||document.body.scrollTop
      }
      //移入图片显示视口和放大镜
      origDraw.onmouseover=function(){
        view.style.display='block'
        enlarge.style.display='block'
        let hnum=origDraw.offsetHeight
        let wnum=origDraw.offsetWidth
        //设置放大镜的尺寸
        enlarge.style.width=wnum/3.8+'px';
        enlarge.style.height=hnum/3.8+'px';
        //设置最大移动距离
        let maxleft=wnum-enlarge.offsetWidth
        let maxtop=hnum-enlarge.offsetHeight
       
        origDraw.onmousemove=function(e){
          console.log(e)
          console.log(paDraw.offsetLeft,paDraw.offsetTop)
          let left=e.clientX-paDraw.offsetLeft-enlarge.offsetWidth/2
          let top=e.clientY-paDraw.offsetTop-enlarge.offsetHeight/2+scollTop
          //放大镜的移动
          enlarge.style.left=left+'px'
          enlarge.style.top=top +'px'
          if(enlarge.offsetTop<0){
            enlarge.style.top=0
          }
          if(enlarge.offsetLeft<0){
            enlarge.style.left=0
          }
          if(enlarge.offsetTop>maxtop){
            enlarge.style.top=maxtop+'px'
          }
          if(enlarge.offsetLeft>maxleft){
            enlarge.style.left=maxleft+'px'
          }
          //放大后的图片的移动
          digDraw.style.top=-(enlarge.offsetTop*3.8)+'px'
          digDraw.style.left=-(enlarge.offsetLeft*3.8)+'px'

        }

      }
      //移出图片隐藏视口和放大镜
      origDraw.onmouseout=function(){
        view.style.display='none'
        enlarge.style.display='none'

      }
    }
  </script>
</body>

</html>